<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人主页</title>
    <!-- 鼠标点击文字显示效果css代码-->
    <link rel="stylesheet" href="../public_static/css/mouse_click_effect.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        /* 导航菜单样式 */
        .management-nav {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            margin-bottom: 20px;
            overflow: hidden;
        }
        
        .nav-list {
            display: flex;
            list-style: none;
        }
        
        .nav-item {
            padding: 15px 25px;
            cursor: pointer;
            transition: background-color 0.2s;
            border-bottom: 3px solid transparent;
        }
        
        .nav-item.active {
            background-color: #f0f7ff;
            border-bottom-color: #4285f4;
            color: #4285f4;
            font-weight: 500;
        }
        
        .nav-item:hover:not(.active) {
            background-color: #f9f9f9;
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 1px solid #ddd;
        }
        
        h1 {
            color: #333;
            margin-bottom: 10px;
        }
        
        .form-section {
            background: white;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }
        
        .form-title {
            color: #444;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        
        /* 内容区域默认隐藏，只显示激活的内容 */
        .content-section {
            display: none;
        }
        
        .content-section.active {
            display: block;
        }


        /* 用户信息样式 */
        .user-profile {
            display: flex;
            align-items: center;
            gap: 30px;
            padding: 20px 0;
        }

        .avatar-container {
            flex: 0 0 auto;
        }

        .avatar {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            object-position: center;
            border: 4px solid #f0f7ff;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .user-info {
            flex: 1;
            padding: 15px;
            background-color: #f9f9f9;
            border-radius: 8px;
            min-width: 0;
        }

        .info-item {
            margin-bottom: 20px;
        }

        .info-item label {
            display: inline-block;
            width: 80px;
            font-weight: 500;
            color: #555;
        }

        .info-item span {
            color: #333;
            word-break: break-all;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>个人主页</h1>
            <p>在这里开启你的个人主页</p>
        </header>

        <!-- 管理导航菜单 -->
        <nav class="management-nav">
            <ul class="nav-list">
                <li class="nav-item active" data-target="personal-info">账号信息</li>
                <li class="nav-item" data-target="comment-management">评论管理</li>
                <li class="nav-item" data-target="system-management">系统管理</li>
            </ul>
        </nav>

        <!-- 账号信息内容区域 -->
        <div id="personal-info" class="content-section active">
            <section class="form-section">
                <h2 class="form-title">账号信息</h2>
                <div class="user-profile">
                    <div class="avatar-container">
                        <img id="user-avatar" src="./static/images/user/user-头像.jpg" alt="用户头像" class="avatar">
                    </div>
                    <div class="user-info">
                        <div class="info-item">
                            <label>用户名：</label>
                            <span id="username-display"></span>
                        </div>
                        <div class="info-item">
                            <label>密码：</label>
                            <span id="password-display"></span>
                        </div>
                    </div>
                </div>
            </section>
        </div>
        
        <!-- 评论管理内容区域 -->
        <div id="comment-management" class="content-section">
            <section class="form-section">
                <h2 class="form-title">评论管理</h2>
                <p>评论管理功能即将上线，敬请期待...</p>
            </section>
        </div>
        
        <!-- 系统管理内容区域 -->
        <div id="system-management" class="content-section">
            <section class="form-section">
                <h2 class="form-title">系统管理</h2>
                <p>系统管理功能即将上线，敬请期待...</p>
            </section>
        </div>
    </div>

    <!-- 鼠标点击文字显示效果js代码-->
    <script src="../public_static/js/mouse_click_effect.js"></script>

    <script>
        // 获取所有导航项和内容区域
        const navItems = document.querySelectorAll('.nav-item');
        const contentSections = document.querySelectorAll('.content-section');
        
        // 为每个导航项添加点击事件监听
        navItems.forEach(item => {
            item.addEventListener('click', () => {
                // 获取目标内容区域的ID
                const targetId = item.getAttribute('data-target');
                
                // 移除所有导航项的active类
                navItems.forEach(nav => nav.classList.remove('active'));
                // 给当前点击的导航项添加active类
                item.classList.add('active');
                
                // 隐藏所有内容区域
                contentSections.forEach(section => section.classList.remove('active'));
                // 显示目标内容区域
                document.getElementById(targetId).classList.add('active');
            });
        });
    </script>
    <script>
        // 获取用户信息并显示
        async function loadUserInfo() {
            try {
                // 调用预加载脚本暴露的API获取当前用户信息
                const user = await window.electronAPI.getCurrentUser();
                displayUserInfo(user);
            } catch (error) {
                console.error('获取用户信息失败:', error);
            }
        }

        // 显示用户信息（明文显示密码）
        function displayUserInfo(user) {
            if (user) {
                document.getElementById('username-display').textContent = user.username || '未设置';
                document.getElementById('password-display').textContent = user.password || '未设置';
            } else {
                document.getElementById('username-display').textContent = '未登录';
                document.getElementById('password-display').textContent = '无数据';
            }
        }

        // 页面加载完成后加载用户信息
        document.addEventListener('DOMContentLoaded', loadUserInfo);
    </script>

</body>
</html>